﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
        name="viewport" />
  <link rel="stylesheet" href="../../../Content/amazeui/css/amazeui.min.css?v=1.0" />
  <link rel="stylesheet" href="../../../Content/weui/weui.min.css" />
  <!-- <link rel="stylesheet" href="./css/message.css?168" />-->
  <script src="../../../Content/jquery/jquery-1.12.1.min.js"></script>
  <title>留言</title>
  <style>
    :-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #000;
    }

    ::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #000;
    }

    input:-ms-input-placeholder, textarea:-ms-input-placeholder {
      color: #000;
    }

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
      color: #000;
    }

    .files {
      width: 100%;
      margin: 0;
      padding: 0;
    }

      .files li {
        float: left;
        list-style: none;
        width: 25%;
        height: 80px;
      }

      .files .cd_hide {
        position: relative;
        width: 100%;
        height: 100%;
      }

        .files .cd_hide img {
          width: 100%;
          height: 100%;
        }

        .files .cd_hide .delete {
          position: absolute;
          width: 20px;
          height: 20px;
          top: -5px;
          right: -5px;
          border-radius: 50%;
          background-image: url(images/close.png);
          background-position: center center;
          background-color: rgba(0,0,0,0.5);
          background-repeat: no-repeat;
        }
  </style>
</head>
<body>
  <form class="am-form" style="padding: 30px">
    <div class="am-form-group">
      <input id="title" class="am-form-field" placeholder="标题" />
    </div>
    <div class="am-form-group">
      <textarea id="oaWhat" class="am-form-field" rows="3" placeholder="内容"></textarea>
    </div>
    <div class="am-form-group">
      <input id="username" class="am-form-field" placeholder="姓名" />
    </div>
    <!--<div class="am-form-group">
        <input id="oaTel" class="am-form-field" type="number" pattern="[0-9]*" placeholder="联系电话" />
    </div>-->
    <!-- <div class="am-form-group">
                <input id="idcard" class="am-form-field" placeholder="身份证号" />
        </div>-->
    <div class="am-form-group am-nbfc">
      <div class="am-form-label" style="margin-left: 0; margin-bottom: 18px">
        上传照片（视频） <a class="am-fr">
          <i onclick="javascript:selectType();" class="am-icon-camera"></i>
        </a>
      </div>
      <ul class="files">
        <!--<li>
            <div class="weui_uploader_input_wrp">
                <a class="weui_uploader_input" href="javascript:selectType();"></a>
            </div>
        </li>-->
        <li>
          <div class="yl1 cd_hide" id="yl1">
          </div>
        </li>
        <li>
          <div class="yl2 cd_hide" id="yl2">
          </div>
        </li>
        <li>
          <div class="yl3 cd_hide" id="yl3">
          </div>
        </li>
      </ul>
    </div>
    <a class="am-btn am-btn-primary am-btn-block" onclick="next()">提交 </a></div>
  </form>
  <div class="page">
    <div class="weui_cells weui_cells_form">
      <div class="cameraFun" style="display: none;">
        <span class="weui_btn weui_btn_mini weui_btn_primary">拍摄</span> <span class="weui_btn weui_btn_mini weui_btn_primary">
          照相
        </span>
      </div>
      <input type="hidden" id="filePath" />
      <input type="hidden" id="fileType" />
      <input type="hidden" id="wid" value="{$wid}" />
      <input type="hidden" id="openid" value="{$openid}" />
      <!--<div class="aoaYuan" id="fileTxt"></div>-->
      <div id="toast" style="display: none;">
        <div class="weui_mask_transparent">
        </div>
        <div class="weui_toast">
          <i class="weui_icon_toast"></i>
          <p id="toastMessage" class="weui_toast_content">
          </p>
        </div>
      </div>
      <div id="loadingToast" class="weui_loading_toast" style="display: none;">
        <div class="weui_mask_transparent">
        </div>
        <div class="weui_toast">
          <div class="weui_loading">
            <div class="weui_loading_leaf weui_loading_leaf_0">
            </div>
            <div class="weui_loading_leaf weui_loading_leaf_1">
            </div>
            <div class="weui_loading_leaf weui_loading_leaf_2">
            </div>
            <div class="weui_loading_leaf weui_loading_leaf_3">
            </div>
            <div class="weui_loading_leaf weui_loading_leaf_4">
            </div>
            <div class="weui_loading_leaf weui_loading_leaf_5">
            </div>
            <div class="weui_loading_leaf weui_loading_leaf_6">
            </div>
            <div class="weui_loading_leaf weui_loading_leaf_7">
            </div>
            <div class="weui_loading_leaf weui_loading_leaf_8">
            </div>
            <div class="weui_loading_leaf weui_loading_leaf_9">
            </div>
            <div class="weui_loading_leaf weui_loading_leaf_10">
            </div>
            <div class="weui_loading_leaf weui_loading_leaf_11">
            </div>
          </div>
          <p class="weui_toast_content">
            数据提交中
          </p>
        </div>
      </div>
      <div class="weui_dialog_alert" id="dialog" style="display: none;">
        <div class="weui_mask">
        </div>
        <div class="weui_dialog">
          <div class="weui_dialog_hd">
            <strong class="weui_dialog_title">提示</strong>
          </div>
          <div id="dialogMessage" class="weui_dialog_bd">
          </div>
          <div class="weui_dialog_ft">
            <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
          </div>
        </div>
      </div>
      <div class="weui_dialog_alert" id="dialogType" style="display: none;">
        <div class="weui_mask">
        </div>
        <div class="weui_dialog">
          <div class="weui_dialog_ft" style="margin-top: 0;" id="dialogPic">
            <a href="javascript:;" class="weui_btn_dialog primary">照片</a>
          </div>
          <div class="weui_dialog_ft" style="margin-top: 0;" id="dialogVideo">
            <a href="javascript:;" class="weui_btn_dialog primary">小视频</a>
          </div>
        </div>
      </div>
      <div id="actionSheetType">
        <div class="weui_mask_transition" id="mask">
        </div>
        <div class="weui_actionsheet" id="weui_actionsheet">
          <div class="weui_actionsheet_menu">
            <div class="weui_actionsheet_cell" id="cellPic">
              照片
            </div>
            <div class="weui_actionsheet_cell" id="cellVideo">
              小视频
            </div>
          </div>
          <div class="weui_actionsheet_action">
            <div class="weui_actionsheet_cell" id="actionsheet_cancel">
              取消
            </div>
          </div>
        </div>
      </div>
      <input class="paishe" name="oaVideoFile" id="oaVideoFile" type="file" onchange="ajaxFileUpload('oaVideoFile')"
             accept="video/*" capture="camcorder" style="display: none;" />
      <input class="zhaoxiang" name="oaPicFile" id="oaPicFile" type="file" onchange="ajaxFileUpload('oaPicFile')"
             accept="image/*" capture="camera" style="display: none;" />
    </div>
  </div>
  <script src="../../../Content/jquery/jquery.cookie.js"></script>
  <script src="../../../Content/jquery/jquery.ajaxfileupload.js"></script>
  <script src="../../../Content/layer/layer.js"></script>
  <script src="../../../scripts/ls.js"></script>
  <script>
    var type = '1';
    var empatyElementLength = 17;
    $(function () {
      var uploadedFilePath = LS.getLocalStorage('UploadFilePath');
      if (uploadedFilePath) {
        showUploadedFile(uploadedFilePath);
      }
      var onlineAlarmOne = LS.getLocalStorage('onlineAlarmOne');
      if (onlineAlarmOne) {
        var onlineAlarmOne = JSON.parse(onlineAlarmOne);
        $('#oaTime').val(onlineAlarmOne[0]['oaTime']);
        $('#oaAddress').html(onlineAlarmOne[1]['oaAddress']);
      } else {
        $('#oaTime').val('');
      }

      var onlineAlarmTwo = LS.getLocalStorage('onlineAlarmTwo');
      if (onlineAlarmTwo) {
        var onlineAlarmTwo = JSON.parse(onlineAlarmTwo);
        $('#oaTel').val(onlineAlarmTwo[2]['oaTelStr']);
        $('#oaWhat').html(onlineAlarmTwo[3]['oaWhatStr']);
        var filePathStr = onlineAlarmTwo[0]['filePathStr'];
        if (filePathStr) {
          $("#filePath").val(filePathStr);
          var strs = new Array();
          strs = filePathStr.split("<");
          for (i = 0; i < strs.length; i++) {
            if (strs[i]) {
              var strsExt = new Array();
              var strExt = strs[i];
              strsExt = strExt.split(".");
              var fileType;
              var fileExtArr = ["mp4", "MP4", "MOV", "mov"];
              var v = $.inArray(strsExt[strsExt.length - 1], fileExtArr);
              if (v >= 0) {
                fileType = 1;
              } else {
                fileType = 2;
              }

              var htmlTxt = '';
              var htmlTxtImg = '<img onclick=deleteFile(' + i + ',"' + strs[i] + '") class="delete" src="images/delete.png">';
              if (fileType == 1) {
                htmlTxt = '<video controls="controls" style="max-width:100%;max-height:100%;" src="~/' + strs[i] + '"></video>';
              } else {
                htmlTxt = '<img onclick=fileInfo("' + strs[i] + '",2) style="max-width:100%;max-height:100%;" src="~/' + strs[i] + '" />';
              }
              $("#yl" + i).html(htmlTxtImg + htmlTxt);
              $("#yl" + i).show();
            }
          }
        }
      }
    });

    function showUploadedFile(src) {
      var strs = new Array();
      strs = src.split("<");
      for (i = 0; i < strs.length; i++) {
        if (strs[i]) {
          var strsExt = new Array();
          var strExt = strs[i];
          strsExt = strExt.split(".");
          var fileType;
          var fileExtArr = ["mp4", "MP4", "MOV", "mov"];
          var v = $.inArray(strsExt[strsExt.length - 1], fileExtArr);
          if (v >= 0) {
            fileType = 1;
          } else {
            fileType = 2;
          }
          var src = strs[i];

          var htmlTxt = '';
          var htmlTxtImg = "<img onclick=deleteFile(1,\"" + src + ") class='delete' src='images/delete.png'>";

          if (fileType == 1) {
            htmlTxt = '<video controls="controls" style="max-width:100%;max-height:100%;" src="~/' + src + '"></video>';
          } else {
            htmlTxt = "<img onclick=fileInfo(\"" + src + "\",2) style='max-width:100%;max-height:100%;' src=" + src + " />";
          }
          $("#yl1").html(htmlTxtImg + htmlTxt);
          $("#yl1").show();
        }
      }
    }

    function checkFileExists(objId) {
      return $(objId).children().length > 0;
    }

    function ajaxFileUpload(objId) {
      if (checkFileExists("#yl1")
        && checkFileExists("#yl2")
        && checkFileExists("#yl3")) {
        alert('最多上传3个文件');
        return;
      }

      $("#fileTxt").html("上传中，请勿关闭..");

      var param = {
        action: "message",
        objId: objId,
        id: 888,
        t: Math.random()
      };

      $.ajaxFileUpload({
        url: '../../../tools/upload_ajax.ashx',
        data: param,
        secureuri: false,
        fileElementId: objId,
        dataType: 'json',
        success: function (data, status) {
          //debugger;
          if (objId == 'oaVideoFile') {
            var fileType = 1;
          } else {
            var fileType = 2;
          }

          var src = data.path;

          if (src.length > 5) {
            //var fileTxt='<span onclick=fileInfo("'+src+'",'+fileType+')>点击预览</span>';
            var fileTxt = '上传成功';
            $("#fileTxt").html(fileTxt);

            var filePathVal = $("#filePath").val();

            var yl1Html = $("#yl1").html();
            var yl2Html = $("#yl2").html();
            var yl3Html = $("#yl3").html();
            $("#filePath").val(filePathVal + '<' + src);
            // $("#fileType").val(fileType+'<'+fileType);
            var htmlTxt = '';
            var htmlTxtImg = '';
            if (fileType == 1) {
              htmlTxt = '<video controls="controls" style="max-width:100%;max-height:100%;" src="' + src + '"></video>';
            } else {
              htmlTxt = '<img onclick=fileInfo("' + src + '",' + fileType + ') style="max-width:100%;max-height:100%;" src="../../..' + src + '" />';
            }

            if (yl1Html.length < empatyElementLength) {
              htmlTxtImg = '<img onclick=deleteFile(1,"' + src + '") class="delete" src="images/delete.png">';
              $("#yl1").html(htmlTxtImg + htmlTxt);
              $("#yl1").show();
              $('.weui_uploader_hd .weui_cell_ft').html("1/3");
            } else {
              if (yl2Html < empatyElementLength) {
                htmlTxtImg = '<img onclick=deleteFile(2,"' + src + '") class="delete" src="images/delete.png">';
                $("#yl2").html(htmlTxtImg + htmlTxt);
                $('.weui_uploader_hd .weui_cell_ft').html("2/3");
                $("#yl2").show();
              } else {
                if (yl3Html < empatyElementLength) {
                  htmlTxtImg = '<img onclick=deleteFile(3,"' + src + '") class="delete" src="images/delete.png">';
                  $("#yl3").html(htmlTxtImg + htmlTxt);
                  $('.weui_uploader_hd .weui_cell_ft').html("3/3");
                  $("#yl3").show();
                }
              }
            }
          } else {
            var fileTxt = '文件类型不允许';
            $("#fileTxt").html(fileTxt);
          }
        },
        error: function (data, status, e) {
          //debugger;
          showMessage("上传失败，请重试.." + e);
        }
      });
      return false;
    }

    function fileInfo(src, fileType) {
      var htmlTxt = '';
      if (fileType == 1) {
        htmlTxt += '<video controls="controls" style="width:100%" src="' + src + '"></video>';
      } else {
        htmlTxt += '<div style="width:100%;height:100%;text-align:center;"><img style="max-width:100%;max-height:100%;" src="../../..' + src + '" /></div>';
      }
      layer.open({
        type: 1,
        title: '原文件预览',
        shadeClose: true,
        area: ['85%', '60%'],
        content: htmlTxt
      });
    }

    function deleteFile(num, url) {
      $("#yl" + num).html("");
      $("#filePath").val($("#filePath").val().replace('<' + url, ''));
    }

    function showMessage(msg) {
      var $dialog = $('#dialog');
      $("#dialogMessage").html(msg);
      $dialog.show();
      $dialog.find('.weui_btn_dialog').one('click', function () {
        $dialog.hide();
      });
      /*
      var $toast = $('#toast');
      if ($toast.css('display') != 'none') {
      return;
      }
      $("#toastMessage").html(msg);
      $toast.show();
      setTimeout(function () {
      $toast.hide();
      }, 2000);
      */
    }

    function selectType() {
      var $dialog = $('#dialogType');
      $dialog.show();

      $('#dialogPic').one('click', function () {
        $dialog.hide();
        oaPicFile.click();
      });
      $('#dialogVideo').one('click', function () {
        $dialog.hide();
        oaVideoFile.click();
      });
      $dialog.find('.weui_btn_dialog').one('click', function () {
        $dialog.hide();
      });
    }

    function showActionSheet() {
      var mask = $('#mask');
      var weuiActionsheet = $('#weui_actionsheet');
      weuiActionsheet.addClass('weui_actionsheet_toggle');
      mask.show().addClass('weui_fade_toggle').one('click', function () {
        hideActionSheet(weuiActionsheet, mask);
      });
      $('#cellPic').one('click', function () {
        hideActionSheet(weuiActionsheet, mask);
        oaPicFile.click();
      });
      $('#cellVideo').one('click', function () {
        hideActionSheet(weuiActionsheet, mask);
        oaVideoFile.click();
      });
      $('#actionsheet_cancel').one('click', function () {
        hideActionSheet(weuiActionsheet, mask);
      });
      weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');

      function hideActionSheet(weuiActionsheet, mask) {
        weuiActionsheet.removeClass('weui_actionsheet_toggle');
        mask.removeClass('weui_fade_toggle');
        weuiActionsheet.on('transitionend', function () {
          mask.hide();
        }).on('webkitTransitionEnd', function () {
          mask.hide();
        })
      }
    }

    function next() {
      var oaTimeStr = $('#oaTime').val();
      var oaAddressStr = $('#oaAddress').html();

      var oaTel = $.trim($('#oaTel').val());
      var oaWhat = $('#oaWhat').val();
      var filePath = $('#filePath').val();
      var wid = $('#wid').val();
      var openid = $('#openid').val();
      var username = $.trim($('#username').val());
      var idcard = $.trim($('#idcard').val());
      var title = $.trim($('#title').val());

      if (title == "") {
        showMessage("请填写标题");
        return false;
      }

      if (username == "") {
        showMessage("请填写姓名");
        return false;
      }

      if (oaWhat == "") {
        showMessage("请填写建言内容");
        return false;
      }

      var canSave = oaWhat && title && username;
      if (!canSave) {
        showMessage('请正确填写信息');
        return false;
      }

      var str = [
        { filePathStr: filePath },
        { yzm: 9999 },
        { oaTelStr: oaTel },
        { oaWhatStr: oaWhat }
      ];
      //alert(str);

      LS.setLocalStorage('onlineAlarmTwo', JSON.stringify(str));
      /*
      var oaTrueName = $('#oaTrueName').html();
      var oaSfzNum = $('#oaSfzNum').html();
      */
      var onlineAlarmOne = LS.getLocalStorage('onlineAlarmOne');
      var onlineAlarmTwo = LS.getLocalStorage('onlineAlarmTwo');

      var data = {
        //oaType: onlineAlarmOne[2]['oaType'],
        //username: oaTrueName,
        //oaSfzNum: oaSfzNum,
        //time: oaTimeStr,
        //address: oaAddressStr,
        tel: oaTel,
        content: oaWhat,
        filepath: filePath,
        t: Math.random(),
        wid: wid,
        openid: openid,
        username: username,
        idcard: idcard,
        title: title,
        status: 0,
        type: '留言'
      };

      var $loadingToast = $('#loadingToast');
      if ($loadingToast.css('display') != 'none') {
        return;
      }
      $loadingToast.show();

      $.ajax({
        url: 'smart.ashx?action=save_message',
        type: 'POST',
        dataType: 'json',
        data: data,
        success: function (data) {
          //debugger;
          if (data.errmsg === 'ok') {
            location.href = 'success.aspx?wid={$wid}';
          } else {
            showMessage('操作超时，请重试');
          }
          $loadingToast.hide();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          $loadingToast.hide();
          alert(errorThrown);
        }
      });
    }
  </script>
</body>
</html>